import Vue from 'vue'

// 很多浏览器都是不同公司开发的产品
// 将所有的基础元素的样式 进行统一的一个库 normalize.css
import 'normalize.css/normalize.css'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en'
// 使用中文解析 组件库
// import locale from 'element-ui/lib/locale/lang/zh-CN'
import i18n from '@/lang'

import '@/styles/index.scss'

import App from './App'
import store from './store'
import router from './router'

// process.env 是系统的环境变量，项目启动以后会自动替换为响应的对象
// console.log('查找我项目里面的环境变量的值,', process.env.VUE_APP_BASE_API)

import '@/icons' // import '@/icons/index.js vue'
import '@/permission'

// ^ 自定义指令 focus
// 自定义指令也有钩子函数: bind, inserted, update, 每个钩子函数都有四个参数
// inserted: 当指令绑定的元素被插入到父元素上面的时候, 就会执行这个钩子函数
// 使用指令的时候一定要加上 v- 前缀, 否则 vue 会把他当成普通属性进行处理
// 四个参数, 第一个参数: 给哪个元素绑定了钩子函数, 第二个参数: 获取到传递的值0
// Vue.directive('focus', {
//   inserted(el, value) {
//   }
// })

// 按钮界别权限的指令
Vue.directive('permission', {
  inserted(el, binding) { // 指令被插入到父元素上时就会执行
    // 在指令里面获取当前用户拥有的按钮权限数组
    // 对于对象级别很深的对象, 一定要进行兼容处理
    // store.state.user.userInfo 是一个空对象, 在请求完之后才能拿到数据
    // binding.value 可以获取到指令使用时传递过来的参数
    // console.log(store.state.user.userInfo?.roles?.points)
    // 定义一个常量: 将 vuex 中存储的用户详细信息中的当前用户拥有的所有按钮权限, 赋值给常量 points
    // if 判断:
    // 通过 参数二.value 可以获取到使用自定义指令时传递过来的参数, 我们在涉及到权限的按钮上绑定了自定义指令, 并传递了对应按钮的权限参数
    // 利用数组的 includes方法, 找到用户拥有的权限中包含有的 对应的按钮权限 的参数
    // 例如用户有 导出按钮的权限, 那么通过此方法就能够从按钮权限中找到 导出按钮的权限参数
    // 这里进行取反, 就代表, 将那些绑定了自定义指令, 但在用户权限中又没有该按钮权限的的按钮元素删除
    // 简而言之就是: 将你用户没有权限的按钮删掉
    // 由于一个元素没有办法直接将自己删除掉, 所以需要先通过 parentNode 找到自己的父元素
    // 再通过 removeChild 删除掉父元素的子元素 (也就是自己), 就能删除掉 当前用户没有权限使用的按钮
    const points = store.state.user.userInfo?.roles?.points
    if (!points.includes(binding.value)) { // 通过判断, 筛选掉用户没有权限的按钮
      el.parentNode.removeChild(el) // 找到自己的父元素, 通过父元素删除掉子元素 (自己)
    }
  }
})

// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// 将 员工管理 模块组件, 全局注册
// use 插件
// 如果要给 Vue.use 使用, 我们这个对象里面, 必须要有一个 install 方法
// 方法里面的参数, 就是我们整个 Vue 实例对象
// 将需要全局注册的组件, 单独抽离出来, 放到 component/index.js 文件中
// 通过 install 方法, 将全局注册的组件 给 Vue.use 使用
import globalComponent from '@/components'
Vue.use(globalComponent)

// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// 全局注册国际化语言包
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

// 项目打包: npm run build:prod
// 查看打包后的包文件体积: npm run preview -- --report

// 项目打包后去掉 console.log:
// 在 vue.config.js 文件中, 在 chainWebpack(config) {} 函数中, 配置一个函数, 去掉打包后的 console.log
// 打包后去掉 consle.log 打印
// config.optimization.minimizer('terser').tap((args) => {
//   args[0].terserOptions.compress.drop_console = true
//   return args
// })
// 最后
// 将 publicPath: '/' 替换为 publicPath: './'

// 自己电脑的本机地址:  localhost 127.0.0.1 都是自己电脑的地址的意思
